<script setup>
import { defineEmits, defineProps, onMounted, ref } from 'vue'

const baseUrl = import.meta.env.VITE_UPLOAD_API

const emits = defineEmits(['cancleClick', 'confirmClick'])

const props = defineProps({
  value: {
    type: Array,
    required: false,
  },
})

const confirmClick = () => {
  emits('confirmClick', form.value)
}

onMounted(async () => {
  if (props.value) {
    form.value = props.value
  }
  console.log(form.value)
  // userList.value = (await listUser({ pageNum: 1, pageSize: 9999 })).rows
})

const userList = ref([])

const form = ref([
  {
    selectType: '请假时间',
    condition: '',
    number: '',
  },
])

const addOption = () => {
  form.value.push({
    selectType: '请假时间',
    condition: '',
    number: '',
  })
}

const removeCurrentOption = (index) => {
  form.value.splice(index, 1)
}

</script>

<template>
  <el-form ref="shenpiForm" :model="form">
    <el-form-item>
      <span
        v-for="(item, index) in form"
        style="width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 12px"
      >
        <div style="display: flex; justify-content: space-between; align-items: center">
          <div class="condition-group">条件组 {{ index + 1 }}</div>
          <el-button icon="Delete" plain circle @click="removeCurrentOption(index)"></el-button>
        </div>
        <el-select v-model="item.selectType" placeholder="请选择" style="width: 100%">
          <el-option label="请假时间" value="请假时间">请假时间</el-option>
          <el-option label="申请金额" value="申请金额">申请金额</el-option>
          <el-option label="付款类别" value="付款类别">付款类别</el-option>
          <el-option label="分公司副总及以上" value="分公司副总及以上">分公司副总及以上</el-option>
          <el-option label="领用用途分类" value="领用用途分类">领用用途分类</el-option>
          <el-option label="印章类型" value="印章类型">印章类型</el-option>
          <el-option label="文件类别" value="文件类别">文件类别</el-option>
          <el-option label="费用承担部门" value="费用承担部门">费用承担部门</el-option>
          <el-option label="采购类型" value="采购类型">采购类型</el-option>
        </el-select>
        <el-select v-model="item.condition" placeholder="请选择" style="width: 100%">
          <el-option label="等于" value="等于"></el-option>
          <el-option label="小于" value="小于"></el-option>
          <el-option label="小于等于" value="小于等于"></el-option>
          <el-option label="大于" value="大于"></el-option>
          <el-option label="大于等于" value="大于等于"></el-option>
        </el-select>
        <el-input
          v-if="item.selectType === '请假时间'"
          v-model="item.number"
          placeholder="请按小时输入"
          style="width: 100%"
          type="number"
        >
          <template #suffix> 小时 </template>
        </el-input>
        <el-input
          v-if="item.selectType === '申请金额'"
          v-model="item.number"
          placeholder="请输入金额"
          style="width: 100%"
          type="number"
        >
          <template #suffix> 元 </template>
        </el-input>
        <el-select
          v-if="item.selectType === '付款类别'"
          v-model="item.number"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option label="经营成本" value="1"></el-option>
          <el-option label="经营费用" value="2"></el-option>
          <el-option label="运营费用" value="3"></el-option>
          <el-option label="景区运营专项审批" value="4"></el-option>
          <el-option label="医专项目专项审批" value="5"></el-option>
        </el-select>
        <el-select
          v-if="item.selectType === '分公司副总及以上'"
          v-model="item.number"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
        <el-select
          v-if="item.selectType === '领用用途分类'"
          v-model="item.number"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option label="自用" value="1"></el-option>
          <el-option label="招待维系" value="2"></el-option>
        </el-select>
        <el-select
          v-if="item.selectType === '印章类型'"
          v-model="item.number"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option label="公章" value="1"></el-option>
          <el-option label="合同章" value="2"></el-option>
          <el-option label="招投标专用章" value="3"></el-option>
        </el-select>
        <el-select
          v-if="item.selectType === '文件类别'"
          v-model="item.number"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option label="报账类" value="1"></el-option>
          <el-option label="合同类" value="2"></el-option>
          <el-option label="招投标类" value="3"></el-option>
          <el-option label="工商税务类" value="4"></el-option>
          <el-option label="其他" value="5"></el-option>
        </el-select>
        <el-select
          v-if="item.selectType === '费用承担部门'"
          v-model="item.number"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option label="月季大观园" value="1"></el-option>
          <el-option label="花镜公园" value="2"></el-option>
          <el-option label="府衙" value="3"></el-option>
          <el-option label="景区集采" value="4"></el-option>
          <el-option label="医专项目" value="5"></el-option>
          <el-option label="默认条件" value="6"></el-option>
        </el-select>
        <el-select
          v-if="item.selectType === '采购类型'"
          v-model="item.number"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option label="办公用品" value="1"></el-option>
          <el-option label="生产用料" value="2"></el-option>
          <el-option label="默认条件" value="3"></el-option>
        </el-select>
      </span>
    </el-form-item>
  </el-form>
  <div style="display: flex; justify-content: center">
    <el-button icon="Plus" plain type="primary" @click="addOption">添加条件组</el-button>
  </div>
  <div style="flex: auto; position: fixed; bottom: 20px; right: 20px">
    <el-button @click="$emit('cancleClick')">取消</el-button>
    <el-button type="primary" @click="confirmClick">确定</el-button>
  </div>
</template>

<style lang="scss" scoped>
.condition-group {
  color: #606266;
  font-feature-settings:
    'ss01' on,
    'ss04' on;
  font-family: 'MiSans';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
</style>
